<template>
	<view class="page">
		<view v-if="voiceType==='leave'" class="meeting-calling-container">
			<view class="hospital-avatar"></view>
			<view class="calling-status" >{{title}}</view>
		</view>
		<view v-if="status == 0&&voiceType=='timeout'" class="meeting-calling-container">
			<view class="hospital-avatar"></view>
			<view class="calling-status">{{title}}</view>
		</view>
		<view v-if="status == 2" class="meeting-calling-container">
			<view class="hospital-avatar"></view>
			<view class="calling-status">正在呼叫...</view>
			<view class="calling-name">{{consultationDetail.slave.hospitalName}}</view>
			<u-button @click="cancel" :custom-style="{'width': '180rpx','margin': '10px 0 0 0'}" shape="cricle" type="error" text="取消呼叫"></u-button>
		</view>
		<web-view v-if="status == 1" :src="meetingUrl" allow="geolocation; microphone; camera; midi; encrypted-media;"></web-view>
		<!-- <iframe v-if="status == 1" :src="meetingUrl" frameborder="0"></iframe> -->
		<view v-if="status == 1" class="leave-button">
			<u-button @click="onLeave" :custom-style="{'width': '180rpx'}" size="small" shape="cricle" type="error" text="离开会议"></u-button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import config from '@/common/config'
	import {v1EhrConsultationDetail} from'@/common/api/consultation/detail/detail.js'
	import { v1Departments } from '../../../common/api';
	const app = getApp()
	
	export default {
		computed: {
			 ...mapState(['$userInfo']),
			 
		},
		data() {
			return {
				query: {
					businessId: ''
				},
				consultationDetail: {
					consult: {},
					slave: {}
				},
				status: 0, //0:空闲，1:已接听，2:正在发送呼叫请求，3:正在被呼叫
				meetingUrl: '',
				phone:'',
				voiceType:''
			}
		},
		onLoad(query){
			this.query.businessId = query.businessId
			
			
			app.globalData.meetingWebSocket.bind('receive', this.bindReceive)
			
			app.globalData.meetingWebSocket.bind('status', this.bindStatus)
			
			if(this.$userInfo.type==='calling'){
				app.showLoading()
				app.globalData.meetingWebSocket.answer()
				app.hideLoading()
			}else{
				this.getConsultationDetail()
			}
		},
		onUnload(){
			app.globalData.meetingWebSocket.unbind('receive', this.bindReceive)
			
			app.globalData.meetingWebSocket.unbind('status', this.bindStatus)
			
		},
		methods: {
			
			bindReceive(data){
				console.log('data',data)
				if (data.type == 'answer'){
					console.log('对方已接听会议请求,将打开会诊视频窗口')
					this.meetingUrl = config.meeting_url + data.businessId;
				}else if (data.type == 'leave') {
					console.log('对方已离开会议')
					this.title = '对方已离开会议'
					this.voiceType='leave'
				}
			},
			bindStatus(e){
				this.status = e.status
			},
			getConsultationDetail() {
				app.showLoading()
				v1EhrConsultationDetail(this.query.businessId).then((response) => {
					this.consultationDetail = response.object;
					this.calling()
					app.hideLoading()
				})
			},
			calling(){
				let receiveOrgId = this.consultationDetail.slave.deptId
				let receiveOrgName = this.consultationDetail.slave.hospitalName
				let businessId = this.consultationDetail.consult.id
				
				app.globalData.meetingWebSocket.calling({
					businessId,
					receiveOrgId,
					receiveOrgName
				}).then(state=>{
					if(state==='timeout'){
						v1Departments(this.consultationDetail.slave.deptId).then(res=>{
							let {telphone } = res.object
							this.phone=telphone
							this.voiceType=state
							this.title = '呼叫超时,请拨打科室电话：'+telphone
						})
					}
				})
			},
			onLeave(){
				app.showModal({title: '离开会议', content: '是否确认离开会议?'}).then(confirm=>{
					if(confirm.confirm){
						this.$store.commit('setUserInfo',{})
						uni.navigateBack({delta: 1})
						app.globalData.meetingWebSocket.leave()
					}
				})
			},
			cancel(){
				app.showModal({title: '取消通话', content: '是否确认取消通话?'}).then(confirm=>{
					if(confirm.confirm){
						uni.navigateBack({delta: 1})
						app.globalData.meetingWebSocket.cancelCall()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100vw;
		height: calc(100vh - 44px);
		background-color: #333;
	}
	.leave-button{
		position: fixed;
		top: 8px;
		right: 10px;
		z-index: 999;
	}
	.meeting-calling-container{
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto ;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 300rpx;
		.hospital-avatar{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			background-color: #f0f0f0;
		}
		.calling-status{
			margin: 5px 0;
			font-size: $ft-size-base;
			color: #f0f0f0;
		}
		.calling-name{
			font-size: $ft-size-md;
			color: #fff;
			font-weight: bold;
		}
	}
</style>
